<template>
  <div>
    <!--头部-->
    <Header :chooseValue="1"></Header>
    <div v-if="pcshow" class="jqgk" style="background:#fff5e0">
      <div class="contai" style="max-width:1538px;font-size:15px">
        <div class="mainCon">
          <div class="mainConLeft">
            <!-- 模块1 -->
            <div class="mainList">
              <h3 @click="seePhoto"><a href="" class="eatTitleA"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture1" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in foodList" :key="item.key">
                      <div @click="seePhotoInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
            <!-- 模块2 -->
            <div class="mainList">
              <h3><a @click="seeAudio" class="eatTitleB"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture2" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in liveList" :key="item.key">
                      <div @click="seeAudioInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
            <!-- 模块3 -->
            <div class="mainList">
              <h3><a @click="seeVideo" class="eatTitleC"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture3" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in playList" :key="item.key">
                      <div @click="seeVideoInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
            <!-- 模块4 -->
            <div class="mainList">
              <h3><a @click="changePanorama" class="eatTitleD"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture4" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in panoramaList" :key="item.key">
                      <div @click="toWailian(item.url)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
            <!-- 模块5-->
            <div class="a2" @click="changeFood(4)">
              <div class="logoPosition">
                <img :src="picture5" class="imgLogoCenter" />
                <img src="../assets/logo/chlogo.png" class="imgLogo" />
              </div>
            </div>
            <!-- 模块6 -->
            <div class="mainList" style="margin-top:50px">
              <h3><a @click="changeFood(4)" class="eatTitleE"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture7" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListA" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
            <!-- 模块7 -->
            <div class="mainList" style="margin-top:50px">
              <h3><a @click="changeFood(4)" class="eatTitleF"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture8" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListB" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

              <!-- 模块6.1 -->
            <div class="mainList">
              <h3><a @click="changeFood(4)" class="eatTitleG"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture9" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListC" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

              <!-- 模块7.1 -->
            <div class="mainList">
              <h3><a @click="changeFood(4)" class="eatTitleG"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture10" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListD" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

          </div>
          <div class="mainConRight">
            <div class="logoPosition">
              <div class="xqsGreenPath" @click="seeRoad">
                <a><img style="width:65%;height:200px" :src="picture6"/></a>
                <img src="../assets/logo/chlogoa.png" class="logoimga" />
              </div>
            </div>
            <br />
            <h3 class="scenicTitle" @click="changeScenery"></h3>
            <a-spin :spinning="spinning" :delay="delayTime">
              <div v-for="item in scenicSpotList" :key="item.key">
                <div
                  class="mainList"
                  style="text-align:left;"
                  @click="seeInfo(item)"
                >
                  <div class="mainRightColumn" style="width:180px;">
                    <img
                      :src="item.url"
                      style="width:140px;height:140px;border-radius:50%;margin-left:16px"
                    />
                  </div>
                  <div style="padding-top:10px;text-align:center">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </a-spin>
            <br />
          </div>
        </div>
      </div>
    </div>
    <div v-if="!pcshow" style="background:#fff5e0">
      <div class="contai">
        <div class="mobilemainCon">
          <div class="mainConLeft">
            <!-- 模块1 -->
            <div class="mobileMainList">
              <h3 @click="seePhoto"><a href="" class="eatTitleA"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture1" style="width:140px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in foodList" :key="item.key">
                      <div @click="seePhotoInfo(item)">{{ item.title }}</div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

            <!-- 模块2 -->
            <div class="mobileMainList">
              <h3><a @click="seeAudio" class="eatTitleB"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture2" style="width:140px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in liveList" :key="item.key">
                      <div @click="seeAudioInfo(item)">{{ item.title }}</div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

            <!-- 模块3 -->
            <div class="mobileMainList">
              <h3><a @click="seeVideo" class="eatTitleC"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture3" style="width:140px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in playList" :key="item.key">
                      <div @click="seeVideoInfo(item)">{{ item.title }}</div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
            <!-- 模块4 -->
            <div class="mobileMainList">
              <h3><a @click="changePanorama" class="eatTitleD"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture4" style="width:140px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in panoramaList" :key="item.key">
                      <div @click="toWailian(item.url)">{{ item.title }}</div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
            <div style="height:20px"></div>
          </div>
             <!-- 模块5 交通 -->
          <!-- <div>
            <div style="width:356px;height:140px">
              <a @click="changeFood(4)"><img :src="picture5"/></a>
              <img src="../assets/logo/chlogo.png" style="position:absolute;"/>
            </div>
          </div> -->
            <!-- 模块7 -->
           <div class="mobileMainList" style="margin-top:-100px">
              <h3><a @click="changePanorama" class="eatTitleE"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture7" style="width:100px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListA" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
             <!-- 模块8-->
            <div class="mobileMainList">
              <h3><a @click="changePanorama" class="eatTitleF"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture8" style="width:100px;height:100px" />
                <div class="mainLeftColumn">
                   <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListB" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

          <div class="mainConLeft" >
            <!-- 模块9 -->
            <div class="mobileMainList">
              <h3 @click="changeScenery" class="scenicTitle"></h3>
              <a-spin :spinning="spinning" :delay="delayTime">
                <div class="mainLeftRow">
                  <div class="mainLeftColumnForNew">
                    <a-spin :spinning="spinning" :delay="delayTime">
                      <div
                        v-for="item in scenicSpotList"
                        :key="item.key"
                        class="mainLeftRow"
                        style="margin-top:20px"
                      >
                        <div class="lionDance" @click="seeCustomsInfo(item)">
                          <a @click="seeInfo(item)"
                            ><img
                              :src="item.url"
                              style="width:100px;height:100px"
                            />
                          </a>
                        </div>
                        <div @click="seeInfo(item)">
                          <h3 class="lionDanceTitle">{{ item.title }}</h3>
                          <div class="lionDanceTitleA">
                            {{ item.introduce }}
                          </div>
                        </div>
                      </div>
                    </a-spin>
                  </div>
                </div>
              </a-spin>
            </div>

            <div class="mobileMainList">
              <img @click="seeRoad" class="outlineTitle" :src="picture6" />
              <!-- <img :src="picture6"  @click="seeRoad" style="margin-right:40px">          -->
              <img src="../assets/logo/chlogoa.png" class="mobileimgLogoA" />
            </div>

            <!-- 模块6 -->
            <div class="mainListForP" style="margin-top:-80px">
              <h3><a @click="changeFood(4)" class="eatTitleE"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture7" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListA" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

              <!-- 模块6.1 -->
            <div class="mainListForP" style="margin-top:0px">
              <h3><a @click="changeFood(4)" class="eatTitleG"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture9" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListC" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

            <!-- 模块7 -->
            <div class="mainListForP" style="margin-top:10px">
              <h3><a @click="changeFood(4)" class="eatTitleF"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture8" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListB" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

              <!-- 模块7.1 -->
            <div class="mainListForP" style="margin-top:0px">
              <h3><a @click="changeFood(4)" class="eatTitleG"></a></h3>
              <div class="mainLeftRow">
                <img :src="picture10" style="width:200px;height:100px" />
                <div class="mainLeftColumn">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <div v-for="item in trafficListD" :key="item.key">
                      <div @click="seeTrafficInfo(item)" class="titleA">
                        {{ item.title }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>

            <div style="height:20px"></div>

          </div>
        </div>
      </div>

    </div>

    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './header'
import Footer from './footer'
import {
  getFoodList,
  getLiveList,
  getPlayList,
  getTrafficList,
  getCultureCustomList,
  getCultureCelebrityList,
  getScenicSpotList,
  getPhoto,
  getAudio,
  getPanorama,
  getVideo,
  getHomePic
} from '../request/api'
export default {
  components: { Header, Footer },
  data () {
    return {
      pcshow: false,
      choseValue: 0,
      dataList: [],
      phoneDataList: [],
      styletable: {},
      mapStyle: {},
      spinning: true,
      delayTime: 500,
      scenicSpotList: [],
      foodList: [],
      liveList: [],
      playList: [],
      trafficList: [],
      trafficListA: [],
      trafficListB: [],
      trafficListC: [],
      trafficListD: [],
      panoramaList: [],
      customList: [],
      customListFirst: [],
      spinning: true,
      delayTime: 500,
      picture1: '',
      picture2: '',
      picture3: '',
      picture4: '',
      picture5: '',
      picture6: '',
      picture7: '',
      picture8: '',
      picture9: '',
      picture10: ''
    }
  },
  beforeCreate () {},
  created () {
    if (this._isMobile()) {
      this.pcshow = false
    } else {
      this.pcshow = true
    }
  },
  mounted () {
    this.getScenicSpotListFunction()
    this.getPhotoFunction()
    this.getAudioFunction()
    this.getVideoFunction()
    this.getPanoramaFunction()
    this.getHomePicFunction()
    this.getTrafficListFunction()
  },
  methods: {
    // getHomePic
    getHomePicFunction () {
      getHomePic(this.HOST)
        .then(response => {
          this.spinning = true
          this.picture1 = response.data[0].url
          this.picture2 = response.data[1].url
          this.picture3 = response.data[2].url
          this.picture4 = response.data[3].url
          this.picture5 = response.data[4].url
          this.picture6 = response.data[5].url
          this.picture7 = response.data[6].url
          this.picture8 = response.data[7].url
          this.picture9 = response.data[8].url
          this.picture10 = response.data[9].url
          this.spinning = false
        })
        .catch(error => {})
    },
    // 文化
    getCultureCustomListFunction () {
      getCultureCustomList(this.HOST)
        .then(response => {
          this.spinning = true
          this.customListFirst = response.data.slice(0, 1) || []
          this.customList = response.data.slice(1, 5)
          this.spinning = false
        })
        .catch(error => {})
    },
    // 景点
    getScenicSpotListFunction () {
      getScenicSpotList(this.HOST)
        .then(response => {
          this.spinning = true
          this.scenicSpotList = response.data.slice(0, 8)
          this.spinning = false
        })
        .catch(error => {})
    },
    // 美食
    getFoodListFunction () {
      getFoodList(this.HOST)
        .then(response => {
          this.spinning = true
          this.foodList = response.data.slice(0, 4)
          this.spinning = false
        })
        .catch(error => {})
    },
    // 写真
    getPhotoFunction () {
      getPhoto(this.HOST)
        .then(response => {
          this.foodList = response.data.slice(0, 4)
          // this.photoList = response.data;
        })
        .catch(error => {})
    },
    // 语音
    getAudioFunction () {
      getAudio(this.HOST)
        .then(response => {
          this.spinning = true
          this.liveList = response.data.slice(0, 4)
          this.spinning = false
        })
        .catch(error => {})
    },
    // 720
    getPanoramaFunction () {
      getPanorama(this.HOST)
        .then(response => {
          this.spinning = true
          this.panoramaList = response.data.slice(0, 4)
          this.spinning = false
        })
        .catch(error => {})
    },
    // 视频
    getVideoFunction () {
      getVideo(this.HOST)
        .then(response => {
          this.spinning = true
          this.playList = response.data.slice(0, 4)
          this.spinning = false
        })
        .catch(error => {})
    },
    // 住宿
    getLiveListFunction () {
      getLiveList(this.HOST)
        .then(response => {
          this.spinning = true
          this.liveList = response.data.slice(0, 4)
          this.spinning = false
        })
        .catch(error => {})
    },
    // 购物
    getPlayListFunction () {
      getPlayList(this.HOST)
        .then(response => {
          this.spinning = true
          this.playList = response.data.slice(0, 4)
          this.spinning = false
        })
        .catch(error => {})
    },
    // 交通
    getTrafficListFunction () {
      getTrafficList(this.HOST)
        .then(response => {
          this.spinning = true
          let arr = response.data
          let trafficListA = []
          let trafficListB = []
          arr.forEach(function (element) {
            element.type == 1
              ? trafficListA.push(element)
              : trafficListB.push(element)
          })

          if (trafficListA.length >= 3) {
            this.trafficListA = trafficListA.splice(0, 2)
            this.trafficListC = trafficListA.splice(0, 2)
          } else {
            this.trafficListA = trafficListA.splice(0, 1)
            this.trafficListC = trafficListA.splice(0, 1)
          }

          if (trafficListB.length >= 3) {
            this.trafficListB = trafficListB.splice(0, 2)
            this.trafficListD = trafficListB.splice(0, 2)
          } else {
            this.trafficListB = trafficListB.splice(0, 1)
            this.trafficListD = trafficListB.splice(0, 1)
          }

          this.spinning = false
        })
        .catch(error => {})
    },
    // seeTrafficInfo 交通详情
    seeTrafficInfo (e) {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/traffic',
        query: {
          id: e
        }
      })
    },

    // 判断是PC端还是手机端
    _isMobile () {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    },
    // 写真列表详情
    seePhotoInfo (e) {
      this.$router.push({
        path: '/photoInfo',
        query: {
          id: e
        }
      })
    },
    // 写真列表
    seePhoto () {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/photo'
      })
      this.showPage = false
    },
    // 语音详情
    seeAudioInfo (e) {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/VoicePlay',
        query: {
          id: e
        }
      })
      this.showPage = false
    },
    // 语音列表
    seeAudio () {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/vioce'
      })
      this.showPage = false
    },
    // 视频列表
    seeVideo () {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/video'
      })
      this.showPage = false
    },
    // 视频详情
    seeVideoInfo (e) {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/videoPlay',
        query: {
          id: e
        }
      })
      this.showPage = false
    },
    // 全景列表
    changePanorama () {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/panorama'
      })
      this.showPage = false
    },
    // 全景跳转
    toWailian (e) {
      window.open(e, '_blank')
    },

    // 美食 住宿 交通 游玩跳转
    changeFood (e) {
      this.$emit('scrollTitle')
      this.$router.push({
        // 核心语句
        path: '/food',
        query: {
          id: e
        }
      })
    },
    // 美食 住宿 交通 游玩跳转
    changeFoodInfo (e) {
      this.$router.push({
        path: '/foodInformation',
        query: {
          id: e
        }
      })
    },
    // 文化
    changeCustoms () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/customs'
      })
    },
    // 文化详情()
    seeCustomsInfo (e) {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/customsInfomation',
        query: {
          id: e
        }
      })
    },
    // 写真列表
    seePhoto () {
      this.$router.push({
        // 核心语句
        path: '/photo'
      })
    },
    // 道路
    seeRoad () {
      this.$router.push({
        // 核心语句
        path: '/outline'
      })
    },
    // 景区
    changeScenery () {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/scenery'
      })
    },
    // 详情()
    seeInfo (e) {
      this.$emit('scrollTitle')
      this.$router.push({
        path: '/sceneryInfo',
        query: {
          id: e
        }
      })
      this.showPage = false
    }
  }
}
</script>

<style>
.bodys {
  display: flex;
  flex-direction: row;
  margin-right: 20px;
  margin-left: 20px;
  width: 100px;
}
.indexLayout {
  display: flex;
  /*row 横向  column 列表  */
  flex-direction: column;
  float: left;
}
.mainCon {
  overflow: hidden;
  /* padding: 0px 0px 0px 20px; */
  background: #fff5e0;
  width: 100%;
  overflow: hidden;
  margin-left: 100px;
  margin-top: 40px;
}
.mobilemainCon {
  overflow: hidden;
  /* padding: 0px 0px 0px 20px; */
  background: #fff5e0;
  width: 100%;
  overflow: hidden;
  padding-left: 5%;
}

.mainConLeft {
  width: 900px;
  float: left;
}
.mobileMainList {
  margin: 20px 120px 0px 0px;
  display: flex;
  flex-direction: column;
}
.mainList {
  margin: 20px 120px 0px 0px;
  float: left;
  display: flex;
  flex-direction: column;
}
.mainListForP{
   margin: 20px 20px 0px 0px;
  display: flex;
  flex-direction: column;
}
.mainListLeft {
  text-align: left;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.mainLeftRow {
  display: flex;
  flex-direction: row;
}
.mainRightColumn {
  display: flex;
  flex-direction: column;
}
.mainLeftColumnForNew {
  display: flex;
  flex-direction: column;
  display: block;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  padding: 3px 0px 0px 0px;
  text-align: left;
}
.mainLeftColumn {
  display: flex;
  flex-direction: column;
  display: block;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  padding: 3px 0px 0px 20px;
  text-align: left;
  overflow: hidden;
}
.mainLeftColumn .titleA {
  width: 100px;
  height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.mainConRight {
  width: 600px;
  float: left;
}
.eatTitleA {
  display: block;
  width: 328px;
  height: 61px;
  background: url(../assets/logo/1.png) no-repeat 0px 0px;
}
.eatTitleB {
  display: block;
  width: 328px;
  height: 61px;
  background: url(../assets/logo/2.png) no-repeat 0px 0px;
}
.eatTitleC {
  display: block;
  width: 328px;
  height: 61px;
  background: url(../assets/logo/3.png) no-repeat 0px 0px;
}
.eatTitleD {
  display: block;
  width: 328px;
  height: 61px;
  background: url(../assets/logo/4.png) no-repeat 0px 0px;
}
.eatTitleE {
  display: block;
  width: 328px;
  height: 61px;
  background: url(../assets/logo/5.png) no-repeat 0px 0px;
}
.eatTitleF {
  display: block;
  width: 328px;
  height: 61px;
  background: url(../assets/logo/6.png) no-repeat 0px 0px;
}
.eatTitleG {
  display: block;
  width: 328px;
  height: 20px;
}

.scenicTitle {
  width: 258px;
  height: 60px;
  background: url(../assets/logo/index_pic00.png) no-repeat 0px 0px;
}
.outlineTitle {
  width: 328px;
  height: 150px;
}
.a2 {
  margin: 40px 0 0px 0px;
  float: left;
  display: flex;
  flex-direction: column;
}
.a3_img {
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 0px 0px 10px 8px;
}
.lionDanceTitle {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  padding: 3px 0px 0px 10px;
}
.lionDanceTitleA {
  display: block;
  width: 200px;
  font-size: 15px;
  color: #333;
  padding: 3px 0px 0px 10px;
  height: 70px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /*文字超出部分以省略号显示*/
  /* white-space: ; */
}
.scenicList {
  overflow: hidden;
  margin-top: 8px;
}
.scenicList li a {
  display: block;
  font-size: 15px;
  color: #333;
  text-align: center;
}
.xqsGreenPath {
  margin-left: -50px;
  cursor: pointer;
}
/* 图片浮在另一张图片上 */
.logoPosition {
  position: relative;
}
.logoPosition .imgLogo {
  position: absolute;
  top: 60px;
  left: 310px;
}
.logoPosition .imgLogoCenter {
  width: 770px;
  height: 230px;
  position: relative;
  top: 0;
  left: 0;
}

.logoPosition .mobileimgLogo {
  position: relative;
  z-index: 11;
  top: -130px;
}
.logoPosition .logoimga {
  position: relative;
  z-index: 11;
  left: -260px;
}
.mobileimgLogoA {
  position: relative;
  z-index: 11;
  width: 200px;
  height: 100px;
  top: -120px;
  left: 70px;
}
/* .center{
justify-content: center;
align-items: center;
flex-direction: row
} */
</style>
